import styles from "./style.less";
import { useEffect, useState } from "react";
import { connect } from "umi";
import { Input, List, message } from "antd";

const MapContainer = (props) => {
  const {
    dispatch,
    children,
    defaultValue,
    searchAddress,
    onSuccess,
    defaultCity,
    venueMapTitle,
  } = props;
  const { Search } = Input;
  const [data, setData] = useState([]);
  const [condition, setCondition] = useState(venueMapTitle);
  const [activite, setActivite] = useState(-1);
  const [placeSearchObj, setPlaceSearchObj] = useState(null);
  useEffect(() => {
    setCondition(venueMapTitle);
    setActivite(-1);
    setData([]);
    var GMap = new AMap.Map("container", {
      resizeEnable: true,
      center: defaultValue,
      zoom: 10,
    });
    var placeSearch = new AMap.PlaceSearch({
      map: GMap,
      city: defaultCity, // 兴趣点城市
      citylimit: true, //是否强制限制在设置的城市内搜索
    }); //构造地点查询类
    setPlaceSearchObj(placeSearch);
    placeSearch.search(searchAddress);
    // 清除Map对象
    return () => dispatch({ type: "global/save", payload: { GMap: {} } });
  }, [defaultCity]);
  const onEnter = () => {
    if (!condition) {
      message.error("请输入门店名称");
      return;
    }
    var placeSearch = placeSearchObj;
    placeSearch &&
      placeSearch.search(condition, function (status, result) {
        // 搜索成功时，result即是对应的匹配数据
        if (result.info == "OK") {
          let objList = result.poiList.pois;
          setData(objList);
        } else {
          setData([]);
        }
      });
  };
  const mouseOver = (index) => {
    var { name } = data[index];
    var placeSearch = placeSearchObj;
    placeSearch && placeSearch.search(name);
    setActivite(index);
  };
  //确认定位
  const saveLocation = (item) => {
    let location = item.cityname + "" + item.adname + "" + item.address;
    let locationName = item.name;
    let Lnglat = [item.location.lng, item.location.lat];
    onSuccess && onSuccess({ location, locationName, Lnglat });
    setCondition(item.name);
    setData([]);
  };
  return (
    <div>
      <Search
        className={styles.searchMap}
        placeholder="请输入门店地址"
        size="large"
        value={condition}
        onChange={(e) => {
          const { value } = e.target;
          if (!value) {
            setData([]);
          }
          setCondition(e.target.value);
        }}
        onSearch={() => {
          onEnter();
        }}
        onPressEnter={() => {
          onEnter();
        }}
      />
      {condition && data.length > 0 && (
        <div className={styles.searchList}>
          <List
            size="large"
            itemLayout="horizontal"
            dataSource={data}
            renderItem={(item, index) => (
              <List.Item
                key={item.id}
                onMouseOver={() => {
                  mouseOver(index);
                }}
                className={activite == index ? styles.activiteMap : ""}
              >
                <List.Item.Meta
                  title={item.name}
                  description={
                    item.cityname + "" + item.adname + "" + item.address
                  }
                />
                {activite == index && (
                  <a
                    className={styles.location}
                    onClick={() => {
                      saveLocation(item);
                    }}
                    key="list-ok"
                  >
                    确认定位
                  </a>
                )}
              </List.Item>
            )}
          />
        </div>
      )}
      <div className={styles.container} id="container">
        {children}
      </div>
    </div>
  );
};
export default connect(({ global }) => ({
  ...global,
}))(MapContainer);

// export const addMaker = ({ map, label = "top", lnglat, callback }) => {
//   const marker = new AMap.Marker({
//     map,
//     label,
//     position: lnglat,
//     offset: new AMap.Pixel(0, 0),
//   });
//   map.add(marker);
//   callback && marker.on("click", callback);
//   return marker;
// };
